<template>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-neutral-medium/30">
            <thead class="bg-neutral-light">
                <tr>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider w-12">
                        <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary"
                            v-model="selectAll" @change="toggleSelectAll">
                    </th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">案件编号
                    </th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">争议类型
                    </th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">申请人</th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">被申请人
                    </th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">提交时间
                    </th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">状态</th>
                    <th scope="col"
                        class="px-4 py-3 text-left text-xs font-semibold text-neutral uppercase tracking-wider">处理人</th>
                    <th scope="col"
                        class="px-4 py-3 text-right text-xs font-semibold text-neutral uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-neutral-medium/30">
                <tr v-for="item in caseData" :key="item.id" class="hover:bg-neutral-light/50 transition-bg"
                    @click="handleRowClick">
                    <td class="px-4 py-4 whitespace-nowrap">
                        <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary"
                            v-model="item.selected">
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium">{{ item.caseNumber }}</div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="text-sm">{{ item.disputeType }}</div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-7 w-7 rounded-full" :src="item.applicant.avatar"
                                :alt="item.applicant.name + '头像'">
                            <div class="ml-2">
                                <div class="text-sm font-medium">{{ item.applicant.name }}</div>
                                <div class="text-xs text-neutral">{{ item.applicant.email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-7 w-7 rounded-full" :src="item.respondent.avatar"
                                :alt="item.respondent.name + '头像'">
                            <div class="ml-2">
                                <div class="text-sm font-medium">{{ item.respondent.name }}</div>
                                <div class="text-xs text-neutral">{{ item.respondent.email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="text-sm">{{ item.submitTime }}</div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full" :class="getStatusClass(item.status)">{{
                            item.status }}</span>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img class="h-6 w-6 rounded-full" :src="item.handler.avatar"
                                :alt="item.handler.name + '头像'">
                            <div class="ml-2 text-sm">{{ item.handler.name }}</div>
                        </div>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button class="text-primary hover:text-primary/80 mr-3" @click="viewCase(item)">查看</button>
                        <button class="text-warning hover:text-warning/80 mr-3" @click="processCase(item)"
                            v-if="item.status !== '已解决' && item.status !== '已驳回'">处理</button>
                        <button class="text-neutral hover:text-neutral/80" @click="showMoreOptions(item)">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface CaseItem {
    id: number
    caseNumber: string
    disputeType: string
    applicant: {
        name: string
        email: string
        avatar: string
    }
    respondent: {
        name: string
        email: string
        avatar: string
    }
    submitTime: string
    status: string
    handler: {
        name: string
        avatar: string
    }
    selected: boolean
}

const caseData = ref<CaseItem[]>([
    {
        id: 1,
        caseNumber: 'CASE-20230512-001',
        disputeType: '服务质量争议',
        applicant: {
            name: '李小明',
            email: 'lixm@example.com',
            avatar: 'https://picsum.photos/id/1027/40/40'
        },
        respondent: {
            name: '恒通科技有限公司',
            email: 'service@hengtong.com',
            avatar: 'https://picsum.photos/id/1066/40/40'
        },
        submitTime: '2023-05-12 09:45',
        status: '待处理',
        handler: {
            name: '张明',
            avatar: 'https://picsum.photos/id/1005/40/40'
        },
        selected: false
    },
    {
        id: 2,
        caseNumber: 'CASE-20230511-087',
        disputeType: '合同纠纷',
        applicant: {
            name: '王建国',
            email: 'wangjg@example.com',
            avatar: 'https://picsum.photos/id/1012/40/40'
        },
        respondent: {
            name: '远大贸易公司',
            email: 'contact@yuanda.com',
            avatar: 'https://picsum.photos/id/1074/40/40'
        },
        submitTime: '2023-05-11 15:22',
        status: '处理中',
        handler: {
            name: '李娜',
            avatar: 'https://picsum.photos/id/1025/40/40'
        },
        selected: false
    },
    {
        id: 3,
        caseNumber: 'CASE-20230510-076',
        disputeType: '产品质量争议',
        applicant: {
            name: '张丽华',
            email: 'zhanglh@example.com',
            avatar: 'https://picsum.photos/id/1062/40/40'
        },
        respondent: {
            name: '盛世电器有限公司',
            email: 'support@shengshi.com',
            avatar: 'https://picsum.photos/id/1083/40/40'
        },
        submitTime: '2023-05-10 11:30',
        status: '已解决',
        handler: {
            name: '张明',
            avatar: 'https://picsum.photos/id/1005/40/40'
        },
        selected: false
    },
    {
        id: 4,
        caseNumber: 'CASE-20230509-065',
        disputeType: '退款争议',
        applicant: {
            name: '刘志强',
            email: 'liuzq@example.com',
            avatar: 'https://picsum.photos/id/1074/40/40'
        },
        respondent: {
            name: '优购电子商务平台',
            email: 'service@yougou.com',
            avatar: 'https://picsum.photos/id/1066/40/40'
        },
        submitTime: '2023-05-09 16:48',
        status: '已驳回',
        handler: {
            name: '李娜',
            avatar: 'https://picsum.photos/id/1025/40/40'
        },
        selected: false
    },
    {
        id: 5,
        caseNumber: 'CASE-20230508-058',
        disputeType: '服务质量争议',
        applicant: {
            name: '陈静',
            email: 'chenj@example.com',
            avatar: 'https://picsum.photos/id/1083/40/40'
        },
        respondent: {
            name: '诚信物流有限公司',
            email: 'info@chengxin.com',
            avatar: 'https://picsum.photos/id/1012/40/40'
        },
        submitTime: '2023-05-08 10:15',
        status: '处理中',
        handler: {
            name: '赵伟',
            avatar: 'https://picsum.photos/id/1062/40/40'
        },
        selected: false
    }
])

const selectAll = computed({
    get() {
        return caseData.value.length > 0 && caseData.value.every(item => item.selected)
    },
    set(value) {
        caseData.value.forEach(item => item.selected = value)
    }
})

const toggleSelectAll = () => {
    caseData.value.forEach(item => item.selected = selectAll.value)
}

const handleRowClick = (e: Event) => {
    // 忽略复选框点击
    if ((e.target as HTMLElement).tagName !== 'INPUT' && (e.target as HTMLElement).tagName !== 'BUTTON') {
        const checkbox = (e.currentTarget as HTMLElement).querySelector('input[type="checkbox"]') as HTMLInputElement
        if (checkbox) {
            checkbox.checked = !checkbox.checked
            const index = Array.from((e.currentTarget as HTMLElement).parentElement!.children).indexOf(e.currentTarget as HTMLElement)
            caseData.value[index].selected = checkbox.checked
        }
    }
}

const getStatusClass = (status: string) => {
    switch (status) {
        case '待处理':
            return 'bg-danger/10 text-danger'
        case '处理中':
            return 'bg-warning/10 text-warning'
        case '已解决':
            return 'bg-success/10 text-success'
        case '已驳回':
            return 'bg-neutral/10 text-neutral'
        default:
            return 'bg-neutral/10 text-neutral'
    }
}

const viewCase = (item: CaseItem) => {
    alert(`查看案件详情: ${item.caseNumber}\n在实际应用中，这里会打开案件详情页面`)
}

const processCase = (item: CaseItem) => {
    alert(`开始处理案件: ${item.caseNumber}\n在实际应用中，这里会打开处理详情页面`)
}

const showMoreOptions = (item: CaseItem) => {
    // 实现更多操作功能
}
</script>
